---
title: 'Adding Shadows'
---

There are a few ways to bring in shadows. The easiest way is to use
`shadowCastChildren` and have all child meshes (even models) automatically be
included as shadow casters.

We will use a floor/ground to have the shadows cast to - that's easy it's just a
prop `allowShadows`. Oh yeah, and a light that is capable of casting shadows!

Note: instead of `shadowCastChildren` if you know the names of the meshes you
want included or excluded then you can use string array props `shadowCasters` or
`shadowCastersExcluding`. With a ref to the shadow caster you can access as
explained below as well with `renderList`.

Here is the imperative way:

```tsx
import { Color3, DirectionalLight, ShadowGenerator, MeshBuilder, StandardMaterial } from "@babylonjs/core";
// you need your scene instance
const box = MeshBuilder.CreateBox('box', { size: 2 }, scene);
box.position.y = 3; // so it is above ground to cast a shadow

const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene);
ground.receiveShadows = true;

var light = new DirectionalLight("dl", new Vector3((-5 * Math.PI) / 4, (-5 * Math.PI) / 4, -Math.PI), scene);
light.position = {new Vector3(0, 4, 16);

var shadowGenerator = new ShadowGenerator(1024, light);
shadowGenerator.useBlurExponentialShadowMap = true;
shadowGenerator.blurKernel = 64;
// this is what makes the box cast shadows
shadowGenerator.getShadowMap().renderList.push(box);
```

```tsx
<directionalLight
  name="dl"
  intensity={0.6}
  direction={new Vector3((-5 * Math.PI) / 4, (-5 * Math.PI) / 4, -Math.PI)}
  position={new Vector3(0, 4, 16)}
>
  <shadowGenerator mapSize={1024} useBlurExponentialShadowMap blurKernel={64} shadowCastChildren>
    <box name="box" size={2} />
  </shadowGenerator>
<directionalLight />
<ground name="ground" height={6} width={6} receiveShadows />
```

If you have followed on the previous guides then you hopefully were able to
follow all of that, but there are definitely a couple of _new_ points that need
to be explained!

1. `<shadowGenerator ... />` will delay instantation until an appropriate light
   source (one that supports shadows) is available as a parent (any ancestor)
   element.
2. `shadowCastChildren` is not a Babylon.js prop - it's a custom
   `react-babylonjs` one that takes all children elements that are meshes (even
   models) and adds/removes them from the shadowMap renderList as they are
   added/removed from the scene automatically. Custom props are handled in the
   guide, but otherwise the Babylon.js API describes the properties

<code src="./adding-shadows/AddingShadows.tsx" />

Thanks for reading this far! That's it for the guide section for now. The
examples go into many specific use cases and highlight other `react-babylonjs`
custom props that are available and also how to use other Babylon.js components
and integrate some 3rd party ones.
